import React, { useEffect, useMemo, useState } from "react";
import request, { baseUrl } from "../../utils/request";
import { useSearchParams, useNavigate } from "react-router-dom";
// import { Row, Col, Layout, Button, Input } from 'antd'
import { Row, Col, Image, Layout, Tag, Space, Button, Input } from 'antd'
import { VerticalAlignBottomOutlined } from '@ant-design/icons'
const { Sider, Content } = Layout;
const { TextArea } = Input;
// import {use}
function Correlation() {
    const navigate = useNavigate()
    const [detaildata, setDetaildate] = useState([])
    const [newcalss, setNewclass] = useState('')
    const [params, setParams] = useSearchParams()



    const movieID = useMemo(() => {
        return params.get('movieID')
    }, [])
    // console.log(movieID);
    // setMovieID(movieidd)
    useEffect(() => {
        request({
            url: '/list/detail',
            params: {
                movieID
            }
        }).then(res => {
            console.log(res.data.data[0].videoClass);
            setNewclass(res.data.data[0].videoClass)
        })
    }, [movieID])
    useEffect(() => {
        request({
            url: `/list/show/category/${newcalss}`,
            params: {
                page: 2,
                size: 12
            }
        }).then(res => {
            // console.log(res.data.movielist.data);
            setDetaildate(res.data.movielist.data)
        })
    }, [newcalss])
    return (

        <Row gutter={['0px', '30px']}>
            <div style={{ width: '90%', margin: 'auto' }}>
                <Row gutter={16}>
                    {
                        detaildata.map(item => {
                            return <Col className="gutter-row" push={2} span={5} key={item.movieID}>
                                <img onClick={() => {
                                    navigate('/detail/?movieID=' + item.movieID)
                                }} src={baseUrl + '/imgs/' + item.imgNames} width="90%" height={'280px'} />
                                <div className='abc'>{item.title}</div>

                            </Col>
                        })
                    }

                </Row>
            </div>
        </Row >
    )
}

export default Correlation